<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="abc">点我</button>

    <script>

        // function fn () {
        //     console.log(123);
        // }

        // fn();

        // 箭头函数 arrow function
        // const fn = () => {
        //     console.log(123);
        // };

        // fn();

        // 一秒之后输出123
        // setTimeout(function () {
        //     console.log(123);
        // }, 1000);

        // setTimeout(() => {
        //     console.log(123);
        // }, 1000);

        // 输入两个参数a, b   返回a和b的和
        // function sum (a, b) {
        //     return a + b;
        // }

        // const sum = (a, b) => a + b;

        // 排序
        // const arr = [-1, 99, 10, 20];

        // console.log(arr.sort(function (a, b) {
        //     return a - b;
        // }));

        // console.log(arr.sort((a, b) => a - b));

        // 找出第一个偶数
        // const arr = [-1, 99, 10, 20];

        // console.log(arr.find((item) => item % 2 === 0));

        // const nums = [1, 2, 3, 4]; // >>> [1, 4, 9, 16]
        // console.log(nums.map((item) => item ** 2));

        // const btn = document.querySelector('button');

        // btn.addEventListener('click', function () {
        //     // console.log(this); // btn
        //     const fn = () => {
        //         console.log(this);
        //     };

        //     function f1 () {
        //         console.log(this);
        //     }
        //     window.f1();
        //     fn();
        // });

        // btn.addEventListener('click', () => {
        //     console.log(this);
        //     // console.log(this.getAttribute('id'));
        // });

        // const obj = {
        //     a: 1,
        //     sayHi () {
        //         console.log(this.a);
        //         const fn = () => {
        //             console.log(this.a);
        //         };
        //         fn();
        //     },
        //     sayHello: () => {
        //         console.log(this.a);
        //     },
        // };

        // obj.sayHi();
        // obj.sayHello();


        function fn () {
        // to do
        const xxx = 1;
        return xxx;
        }

        const arrowFn = () => {
        console.log(this); // window
        return 123;
        }

        const arrowFn1 = () => 123;
        const arrowFn2 = () => ({ name: 'zhangsan' });

        arrowFn();

        const obj = {
        sayHi () {
            console.log(this);
        },
        sayHello: () => {
            console.log(this);
        },
        };

        obj.sayHi(); // obj
        obj.sayHello(); // window

        class Person {
        constructor (name = 'zs') { // 默认参数
            this.name = name !== undefined ? name : 'zs'; // es6之前的默认参数处理方式
        }
        sayHi () {
            console.log(this.name);
            console.log(this);
        }
        sayHello = () => {
            console.log(this);
        }
        }

        const zhangsan = new Person('zs');
        zhangsan.sayHi(); // zhangsan
        zhangsan.sayHello(); // zhangsan
        const lisi = new Person('ls'); //
        lisi.sayHello(); // lisi

        // ```

        // #### 案例1

        // ```js
        function fn () {
        console.log('fn:', this); // window
        var f1 = () => {
            console.log('f1:', this); // window
        };
        f1();
        }

        var obj = {
        f2 () {
            // this: obj
        fn();
        },
        };

        obj.f2();
        // ```

        // #### 案例2

        // ```js
        function fn () {
        console.log('fn:', this);
        var f1 = () => {
            console.log('f1:', this);
        };
        f1();
        }

        var obj = {
        f2 () {
            fn.call(this);
        },
        };

        obj.f2();
        // ```

        // #### 案例3

        // ```js
        const a = {
        fn () {
            console.log('fn:', this); // a
            var f1 = () => {
            console.log('f1:', this); // a
            };
            f1();
        }
        };

        var obj = {
        f2 () {
            // this: obj
            a.fn();
        },
        };

        obj.f2();
        // ```

        // #### 案例4

        // ```js
        const fn = () => {
        console.log('fn:', this); // window
        var f1 = () => {
            console.log('f1:', this); // window
        };
        f1();
        }

        const obj = {
        f2 () {
            // obj
            fn();
        },
        };

        obj.f2();
        // ```

        // #### 案例5

        // ```js
        const fn = () => {
        console.log('fn:', this);
        var f1 = () => {
            console.log('f1:', this);
        };
        f1();
        }

        const obj = {
        f2 () {
            fn.call(this);
        },
        };

        obj.f2();

    </script>
</body>
</html>